body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex; /* 启用Flexbox */
    /*justify-content: center; /* 水平居中 */
   /* align-items: center; /* 垂直居中 */
    height: 100vh; /* 占据整个视窗的高度 */
    margin: 0;
    flex-direction: column; /* 确保子元素（如.form-container）在垂直方向上居中 */
}


/* 页脚 */
footer {
    color: #FF9966;
    font-size: 20px;
    margin-top: 15px;
    text-align: center;
    padding: 10px;
}

.header {
      background-color: #3d6798;
      color: white;
      padding: 2px 2px;
      text-align: center;
    }

.navbar {
    display:flex;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #3d6798;
    }

.navbar li {
      float: left;
    display: inline-block
    }

.navbar li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

.navbar li a:hover {
    background-color: #264a75;
    }


.form-container {
    background-color: #fff;  
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /*width: 300px; /* 或者使用max-width和margin: auto来实现更灵活的居中 */
    /* 如果需要更灵活的宽度和居中，可以移除width并使用以下样式 */
    max-width: 100%;
    width: 400px;
    margin: auto;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #939393;
}

/* 基本表格样式 */
table {
    width: 1080px; /* 表格宽度为父容器的100% */
    border-collapse: collapse; /* 合并表格边框 */
    margin: 20px auto; /* 上下外边距为20px，并自动居中 */
}

/* 表格头部样式 */
thead {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
}

/* 表格头部单元格样式 */
th {
    padding: 8px; /* 内边距 */
    text-align: center; /* 文本居中对齐 */
}

/* 表格主体样式 */
tbody {
    background-color: #f6f6f6; /* 浅灰色背景 */
}

/* 表格主体单元格样式 */
td {
    padding: 12px; /* 内边距 */
    text-align: left; /* 文本左对齐 */
}

/* 列表样式，用于表格中的颜色列表 */
ul {
    display: flex;
    justify-content: center; /* 水平居中 */
    list-style-type: none;
    padding: 0;
    margin: 0;  
}

/* 列表项样式 */
li {
    padding: 4px 0; /* 上下内边距为4px，左右为0 */
}

/* 鼠标悬停行样式 */
tbody tr:hover {
    background-color: #ddd; /* 鼠标悬停时行背景变为浅灰色 */
}


/* 可选：增加字体样式 */
body {
    font-family: Arial, sans-serif; /* 设置字体 */
}

th, td {
    font-size: 16px; /* 字体大小 */
}

.tabs-container {
    display: flex;
    justify-content: center; /* 居中标签页 */
    align-items: center; /* 如果需要垂直居中也可以添加（但在这个案例中可能不需要） */
    gap: 20px; /* 标签页之间的间距 */
    margin-bottom: 20px; /* 与下方表格容器的间距 */
}

.tab {
    padding: 10px 20px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: center; /* 如果需要文本居中 */
}
.table-container {
    /* 表格容器的样式，如需要 */

}
.TooFarList {
    background-color: #b0b3f8;
}
.UpList {
    background-color: #d5adad;
}
.OptimalList {
    background-color: #8eec8e;
}
.BefitList {
    background-color: #92d3f8;
}
.DownList {
    background-color: #b9b9b9;
}
.TooLowList {
    background-color: #dde7f2;
}

.hidden {
    display: none;
}

.studentInfo {
display: flex;
    justify-content: center; /* 居中标签页 */
    align-items: center; /* 如果需要垂直居中也可以添加（但在这个案例中可能不需要） */
    gap: 20px; /* 标签页之间的间距 */
    margin-bottom: 20px; /* 与下方表格容器的间距 */
}

.color-legend {
display: flex;
    justify-content: center; /* 居中标签页 */
    align-items: center; /* 如果需要垂直居中也可以添加（但在这个案例中可能不需要） */
    gap: 20px; /* 标签页之间的间距 */
    margin-bottom: 20px; /* 与下方表格容器的间距 */
}
.Far-legend { background-color: #b0b3f8; }
.Up-legend { background-color: #d5adad; }
.Optimal-legend { background-color: #8eec8e; }
.Befit-legend { background-color: #92d3f8; }
.Down-legend { background-color: #b9b9b9; }
.TooLow-legend { background-color: #dde7f2; }


.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    
}

.popup-content {
    width: 500px; /* 固定宽度，比popup稍小以留出内边距的空间 */
    margin: 0% auto; /* 水平居中 */
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景，增加可读性 */
    padding: 20px; /* 内边距 */
    border-radius: 5px; /* 可选：添加圆角 */  
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
